---
type: integration
title: '@astrojs/partytown'
description: Aprende cómo utilizar la integración @astrojs/partytown en tu proyecto de Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/partytown/'
category: other
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Esta **[integración de Astro][astro-integration]** permite [Partytown](https://partytown.builder.io/) en tu proyecto de Astro.

## ¿Por qué Partytown?

Partytown es una biblioteca cargada de forma diferida para ayudar a trasladar scripts intensivos en recursos a un [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), y fuera del [hilo principal](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread).

Si estás utilizando scripts de terceros para cosas como análisis o anuncios, Partytown es una excelente manera de asegurarte de que no ralenticen tu sitio.

La integración de Astro Partytown instala Partytown por ti y se asegura de que esté habilitado en todas tus páginas.

## Instalación

### Instalación rápida

Astro incluye un comando `astro add` para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Ejecuta uno de los siguientes comandos en una nueva ventana terminal.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add partytown
  ```
  </Fragment>
</PackageManagerTabs>

Si tienes algún problema, [no dudes en informarnos en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación.

### Instalación manual

Primero, instala el paquete `@astrojs/partytown`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/partytown
  ```
  </Fragment>
</PackageManagerTabs>

Luego, aplica esta integración a tu archivo `astro.config.*` usando la propiedad `integrations`:

```js title="astro.config.mjs" ins={2} ins="partytown()"
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  // ...
  integrations: [partytown()],
});
```

## Uso

Partytown debería estar listo para funcionar sin configuración alguna. Si tienes un script de terceros existente en tu sitio, intenta agregar el atributo `type="text/partytown"`:

```html ins="type="text/partytown""
<script type="text/partytown" src="fancy-analytics.js"></script>
```

Si abres la pestaña "Red" de las [herramientas de desarrollador](https://developer.chrome.com/docs/devtools/open/), de tu navegador, deberías ver el proxy `partytown` interceptando esta solicitud.

## Configuración

Para configurar esta integración, pase un objeto 'config' a la llamada de función `partytown()` en `astro.config.mjs`.

```js title="astro.config.mjs" {5-7}
export default defineConfig({
  // ..
  integrations: [
    partytown({
      config: {
        // opciones van aquí
      },
    }),
  ],
});
```

Esto refleja [el objeto de configuración de Partytown](https://partytown.builder.io/configuration).

### config.debug

Partytown viene con un modo de `debug`; actívalo o desactívalo pasando `true` o `false` a `config.debug`. Si se habilita el [modo de `debug`](https://partytown.builder.io/debugging) se imprimirán registros detallados en la consola del navegador.

Si esta opción no se establece, el modo `debug` estará activado de forma predeterminada en el modo [dev](/es/reference/cli-reference/#astro-dev) o [preview](/es/reference/cli-reference/#astro-preview).

```js title="astro.config.mjs" {6}
export default defineConfig({
  // ...
  integrations: [
    partytown({
      // Example: Disable debug mode.
      config: { debug: false },
    }),
  ],
});
```

### config.forward

Los scripts de terceros suelen agregar variables al objeto `window` para que puedas comunicarte con ellos en todo tu sitio. Pero cuando un script se carga en un web worker no tiene acceso a ese objeto `window` global.

Para solucionar esto, Partytown puede "parchar" las variables al objeto global de ventana y reenviarlos al script correspondiente.

Puedes especificar qué variables enviar hacia adelante con la opción `config.forward`. [Lee más en la documentación de Partytown.](https://partytown.builder.io/forwarding-events)

```js title="astro.config.mjs" {7}
export default defineConfig ({
  // ...
  integrations: [
    partytown({
      // Ejemplo: Agregar dataLayer.push como un evento de reenvío.
      config: { 
        forward: ["dataLayer.push"],
      },
    }),
  ],
});
```

## Ejemplos

* ¡[Explora proyectos con Astro Partytown en GitHub](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json\&type=code) para ver más ejemplos!

[astro-integration]: /es/guides/integrations-guide/
